<template>
    <div class="hello">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>用户统计</el-breadcrumb-item>
        </el-breadcrumb>

        <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
        <div id="myChart2" :style="{width: '100%', height: '300px'}"></div>
        <div id="myChart3" :style="{width: '200%', height: '500px'}"></div>
    </div>
</template>

<script>
    // 引入echarts
    import * as echarts from 'echarts'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                myChart: null,
                option: {
                    title: {
                        text: '用户统计'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["0-17岁", "18-23岁", "24-30岁", "31-40岁", "41-50岁", "51-60岁"]
                    },
                    yAxis: {},
                    series: [{
                        name: '用户年龄统计',
                        type: 'bar',
                        data: [1000, 3800, 2600, 1800, 2700, 4500]
                    }]
                },
                myChart2: null,
                option2: {
                    title: {
                        text: '各时间段在线用户',
                    },
                    tooltip: {
                        trigger: 'axis',

                    },
                    legend: {
                        data: ['昨日', '今日']
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    color: ["red", "#CD3333"],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
                            '18', '19', '20', '21', '22', '23', '24'
                        ]
                    },
                    yAxis: {
                        type: 'value',
                        name: '单位（在线人数）',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [{
                        name: '昨日(11月8日)',
                        type: 'line',
                        data: [110, 106, 110, 110, 318, 119, 205, 256, 156, 309, 256, 306, 206, 356, 456, 486,
                            565.45, 234, 156, 206, 126, 256, 150, 276
                        ],

                    },
                        {
                            type: 'line',
                            name: '今日(11月9日)',
                            data: [210, 136, 120, 120, 118, 219, 195, 176, 156, 329, 356, 346, 406.54, 256, 156],
                        }
                    ]
                },
                myChart3: null,
                option3: {
                    title: {
                        text: '各地区分布'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["北京","河北","吉林","浙江","江西","湖北","海南","云南","青海","西藏","上海","山西","黑龙江","安徽","山东","湖南","四川","陕西","内蒙古","宁夏","天津","辽宁","江苏","福建","河南","广东","贵州","甘肃","广西","新疆"]
                    },
                    yAxis: {},
                    series: [{
                        name: '用户地区分布统计',
                        type: 'bar',
                        data: [1000,3800,2600,1800,2700,4500,100,133,679,103,1304,234,5435,543,19,145,2000,1049,4000,2049,11,520,1314,4935,4052,324,4242,15,490,2000]
                    }]
                },
            }
        },
        // watch:{
        //     // 监听 option 更新
        //     option: {
        //         // 更新处理，也可以 handler(newVal，oldVal)
        //         handler(newVal){
        //             if(newVal){
        //                 this.myChart.setOption(newVal)
        //             }
        //         },
        //         //关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
        //         deep: true
        //     },
        // },

        mounted() {
            this.drawBar();
            this.drawBar2();
            this.drawBar3();
        },
        methods: {
            drawBar() {
                // 基于准备好的dom，初始化echarts实例
                // 全局使用 echarts
                // this.myChart = this.$echarts.init(document.getElementById('myChart'))
                // 调用局部的 echarts
                this.myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                this.myChart.setOption(this.option);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart.resize)
                //
                // // 动态刷线数据
                // this.refreshData()
            },
            drawBar2() {
                this.myChart2 = echarts.init(document.getElementById('myChart2'))
                //绘制图表
                this.myChart2?.setOption(this.option2);

                //设置chart的resize的方法
                window.addEventListener("resize",this.myChart2.resize)
            },
            drawBar3() {
                this.myChart3 = echarts.init(document.getElementById('myChart3'))
                //绘制图表
                this.myChart3?.setOption(this.option3);

                //设置chart的resize的方法
                window.addEventListener("resize",this.myChart3.resize)
            },


            //添加refreshData方法进行自动更新设置数据
            // refreshData() {
            //     // 更新定时更新函数
            //     setInterval(() => {
            //         let sDataLength = this.option.series[0].data.length
            //         console.log('refreshData')
            //         let data = []
            //         // 数据随机值更新
            //         for (let i = 0; i < sDataLength; i++) {
            //             data[i] = Math.floor(Math.random() * 100) + 1
            //         }
            //         // 更新数据
            //         this.option.series[0].data = data
            //     }, 1000)
            //
            // }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>